<template>
  <div class="top-header">
    <div class="conter">
      <!-- 天气图标以及标题 -->
      <IconSun :iconName="iconWeatherName" v-if="iconWeatherName.length" />
      <router-link to="/">
        <div class="logo">
          <p>新中地天气</p>
        </div>
      </router-link>
      <!-- IP地址的实时天气 -->
      <div class="weather">
        <h4>{{ counterStore.ipCity }}</h4>
        <span v-if="counterStore.weather.length">
          实时天气：{{ counterStore.weather[0].dayweather }} {{ counterStore.weather[0].daytemp }}°C
        </span>
        <span v-if="counterStore.weather.length">
          {{ counterStore.weather[0].daywind }}风 {{ counterStore.weather[0].daypower }}级
        </span>
      </div>
      <!-- 注意和添加 两个icon -->
      <div class="icon">
        <OverlayView />
        <IconSun
          :iconName="'icon-jia'"
          :width="20"
          :height="20"
          :class="{ active: counterStore.isShow }"
          @click="addCity"
          v-if="counterStore.isShow_1"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import IconSun from './Icon/IconSun.vue'
import OverlayView from './OverlayView.vue'

import { useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore()
const iconWeatherName = ref('')

// 调用counterStore的方法，将当前search的城市的city和adcode存入localStorage，
// 并再次判断当前城市是否已经保存，以此来显示或隐藏添加城市的icon和“可以通过+号保存....”文字
const addCity = () => {
  counterStore.setLocalstoreCity(counterStore.curCity, counterStore.curAdcode)
  counterStore.isSavedCity(counterStore.curAdcode)
}

onMounted(() => {
  counterStore.getIpCityData()
})

watch(counterStore, (newVal) => {
  // 当weather引起counterStore变化时，根据天气情况设置iconWeatherName
  if (newVal.weather.length) {
    if (counterStore.weather[0].dayweather === '晴') {
      iconWeatherName.value = 'icon-taiyang'
    } else if (counterStore.weather[0].dayweather.includes('云')) {
      iconWeatherName.value = 'icon-icon_cloud'
    } else if (counterStore.weather[0].dayweather.includes('阴')) {
      iconWeatherName.value = 'icon-yin'
    } else if (counterStore.weather[0].dayweather.includes('雷')) {
      iconWeatherName.value = 'icon-leidian'
    } else if (counterStore.weather[0].dayweather.includes('雪')) {
      iconWeatherName.value = 'icon-xiaoxue'
    } else if (counterStore.weather[0].dayweather.includes('雨')) {
      iconWeatherName.value = 'icon-zhongyu'
    } else if (counterStore.weather[0].dayweather.includes('雾')) {
      iconWeatherName.value = 'icon-31wu'
    } else if (counterStore.weather[0].dayweather.includes('霾')) {
      iconWeatherName.value = 'icon-mai'
    } else if (counterStore.weather[0].dayweather.includes('沙')) {
      iconWeatherName.value = 'icon-shachenbao'
    }
  }
})
</script>

<style lang="scss" scoped>
.top-header {
  z-index: 10;
  top: 0;
  position: sticky;
  box-shadow: 2px;
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  .conter {
    display: flex;
    color: #fff;
    justify-content: space-between;
    padding: 24px 160px;
    gap: 19px;
    align-items: center;
    height: 88px;
    width: 100%;
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
    a {
      color: inherit;
      text-decoration: inherit;
    }
    .logo {
      align-items: center;
      display: flex;
      gap: 75rem;
      p {
        font-size: 26.7px;
        // line-height: 2rem;
      }
    }
    .weather {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex: 1;
      gap: 15px;
      h4 {
        display: inline-block;
        font-size: 20px;
        font-weight: 500;
      }
      span {
        display: inline-block;
        align-items: center;
      }
    }
    .icon {
      display: flex;
      align-items: center;
      gap: 15px;
      .active {
        display: none;
      }
    }
  }
}
</style>
